<template>

<el-main>
    
        <!-- 查询条件 -->
        <el-form ref="searchForm" label-width="80px" :inline="true" size="small">
          <el-form-item>
            <el-input v-model="searchModel.city" placeholder="请输入城市名字"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
            <el-button icon="el-icon-refresh-right" @click="clearSearchModel()">重置</el-button>
            <el-button type="success" icon="el-icon-plus"   @click="assignCity()" v-if="hasPermission('resource:weather:add')">新增</el-button>
          </el-form-item>
        </el-form>
        <!-- 数据表格 -->
        <!--
            data属性:表格数据
            border属性:表格边框
            stripe属性;表格斑马线
            row-key属性:行数据的Key，用来优化 Table的渲染
            default-expand-all属性:默认展开树形表格数据
            tree-props属性：树形表格配置属性选型
        -->
        <el-row>
            <el-col style="margin-top: 10px;" :span="4" v-for="(data,index) in weatherList" :key="data" :offset=" index % 5 == 0 ? 0 : 1">
                <el-card :body-style="{ padding: '5px'}" style="background-color: rgba(236, 225, 211, 0.523);">
                    <el-tag
                        :key="data.city"
                        :type="data.tagType"
                        @click="$router.push(`/resource/weather/detail/${data.city}`)"
                        effect="dark">
                        {{ data.city }}
                    </el-tag>

                    <img :src="data.weaImg" class="image" style="width: 56px;height: 56px;">
                    <div style="padding: 14px;text-align: center;">
                        <p class="wendu">{{ data.temNight == null ? "无" : data.temNight}} ~ {{ data.temDay == null ? "无" : data.temDay}}°C</p>
                        <p class="tianqi">{{ data.wea == null ? "无" : data.wea}}</p>
                        <p class="tianqi">{{ data.win }} {{ data.winSpeed }} </p>
                        <p class="tianqi">空气质量{{ data.air }}</p>
                        <el-button  type="warning" size="mini"  round v-if="data.air == null "> 未知 </el-button>
                        <el-button  type="success" size="mini"  round v-else-if="data.air < 50 "> 优 </el-button>
                        <el-button  type="primary" size="mini"  round v-else-if="data.air >= 50 && data.air < 100"> 良 </el-button>
                        <el-button  type="danger" size="mini"   round v-else-if="data.air >= 100"> 差 </el-button>
                    </div>
                </el-card>
            </el-col>
        </el-row>

     <!-- 分配城市树窗口 -->
    <system-dialog
    :title="assignCityDialog.title"
    :visible="assignCityDialog.visible"
    :width="assignCityDialog.width"
    :height="assignCityDialog.height"
    @onClose="onAssignCityClose"
    @onConfirm="onAssignCityConfirm"
    >
    <div slot="content">
    <el-tree
    ref="assignCityTree"
    :data="assignCityTreeData"
    node-key="id"
    :props="defaultCityProps"
    empty-text="暂无数据"
    :show-checkbox="true"
    :highlight-current="true"
    :default-expand-all="false"
    ></el-tree>
    </div>
    </system-dialog>

</el-main>    


</template>


<script>

//导入role.js脚本
import roleApi from '@/api/system/role';
import weatherApi from '@/api/resource/weather';
//导入对话框组件
import SystemDialog from '@/components/system/Systemdialog'
//导入末级节点脚本
import leafUtils from '@/utils/leaf'
export default {
  name : 'weather',
        //注册组件
        components:{
            SystemDialog
        },
  data() {
    return {
       weatherList: [], //查询到的数据
       searchModel :{
                city: '',  //城市名称
        },

        //分配城市窗口属性
        assignCityDialog: {
            title: '',
            visible: false,
            height: 450,
            width: 300
        },
        roleIds: [], //角色ID
        userId : this.$store.getters.userId,
        username : this.$store.getters.username,
        assignCityTreeData: [], //树节点数据
        //树节点属性
        defaultCityProps: {
            children: 'children',
            label: 'cityZh'
         },       
    };
  },
  methods: {
     // 请求城市天气
     async search(){
            //发送查询请求
            let res = await weatherApi.dynamicOnline(this.searchModel);
            //判断是否成功
            if(res.success){
            this.weatherList = res.data;
        }  
    },
    clearSearchModel(){
        for (let key in this.searchModel) {
				console.log('key', key);
				console.log('value', this.searchModel[key]);
                this.searchModel[key] = '';
			}
    },

    /**
     * 当前用户所有角色已被分配哪些城市天气权限
     * 当前用户已经显示哪些天气
    * 分配城市
    */
    async assignCity() {
        //设置角色ID
        let response = await roleApi.getUserAllRolesApi({'userId':this.userId});

        if(response.success){
            this.roleIds = response.data;
        }
        //构建参数
        let params = {
            roleIds: this.roleIds,
            userId: this.userId
        }
        //发送查询请求
        let res = await weatherApi.getAssignUserWeatherTreeApi(params)
        //判断是否成功
        if (res.success) {
            //获取当前登录用户拥有的所有城市
            let cityList = res.data.cityList
            //获取当前被分配的角色已经拥有的城市信息
            let checkList = res.data.checkList
            //判断当前菜单是否是末级
            let { setLeaf } = leafUtils()
            //设置城市菜单列表
            let newCityList = setLeaf(cityList)
            //设置树节点菜单数据
            this.assignCityTreeData = newCityList
            //将回调延迟到下次DOM更新循环之后执行,在修改数据之后立即使用它,然后等待DOM更新。
            this.$nextTick(() => {
                //获取树菜单的节点数据
                let nodes = this.$refs.assignCityTree.children
                //设置子节点
                this.setCityChild(nodes, checkList)
            })
        }
        //显示窗口
        this.assignCityDialog.visible = true
        //设置窗口标题
        this.assignCityDialog.title = `给【${this.username}】分配城市` 

    },

    /**
    * 设置城市子节点
    */
    setCityChild(childNodes, checkList) {
        //判断是否存在子节点
        if (childNodes && childNodes.length > 0) {
            //循环所有权限
            for (let i = 0; i < childNodes.length; i++) {
                //根据 data 或者 key 拿到 Tree 组件中的 node
                let node = this.$refs.assignCityTree.getNode(childNodes[i])
                //判断是否已经拥有对应的角色数据
                if (checkList && checkList.length > 0) {
                    //循环遍历已有的权限集合
                    for (let j = 0; j < checkList.length; j++) {
                        //找到已经存在的菜单权限节点
                        if (checkList[j] == childNodes[i].id) {
                            //如果节点是展开状态，则将树节点选中
                            if (childNodes[i].open) {
                                this.$refs.assignCityTree.setChecked(node, true)
                                break
                            }
                        }
                    }
                }
                //如果存在子节点，则递归选中if (childNodes[i].children) {
                this.setCityChild(childNodes[i].children, checkList)
            }
        }
    },
        /**
    * 分配城市窗口确认事件
    * 将要显示天气的城市与User关联
    */
    async onAssignCityConfirm() {
        //获取选中的节点key
        let ids = this.$refs.assignCityTree.getCheckedKeys()
        //获取选中节点的父节点id
        let pids = this.$refs.assignCityTree.getHalfCheckedKeys()
        //组装选中的节点ID数据
        let listId = ids.concat(pids)
        //组装参数
        let params = {
            userId: this.userId,
            list: listId
        }
        //发送请求
        let res = await weatherApi.assignSaveUserWeatherApi(params)
        //判断是否成功
        if (res.success) {
            //关闭窗口
            this.assignCityDialog.visible = false
            //提示成功
            this.$message.success(res.message)
            //重新加载
            this.search();
        } else {
            //提示失败
            this.$message.error(res.data)
        }

    },

    /**
    * 分配城市窗口取消事件
    */
    onAssignCityClose() {
        this.assignCityDialog.visible = false
    },  
    
 
         
  },
  created(){
    this.search();
  }
}
</script>



<style>
  .weather-container{
    margin-left: 10px;    
  }

  .tianqi{
    text-align: center;
    color: rgb(227, 53, 134);
    font-size: 14px; /*设置字号大小*/
  }
  .cityname1{
    font-family: Arial; /*设置字体样式*/
    font-size: 16px; /*设置字号大小*/
    font-weight: bold; /*将字体加粗*/
    color: rgb(3, 225, 228);
  }
  .wendu{
        text-align: center;
        background-image: -webkit-linear-gradient(left,blue,#66ffff 10%,#cc00ff 20%,#CC00CC 30%, #CCCCFF 40%, #00FFFF 50%,#CCCCFF 60%,#CC00CC 70%,#CC00FF 80%,#66FFFF 90%,blue 100%);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-background-size: 200% 100%; 
        -webkit-animation: masked-animation 4s linear infinite;
        font-size: 20px;
    }

    .cityname{
        color: transparent;
        background-color : blue;
        text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
        -webkit-background-clip : text;
    }

    @keyframes masked-animation {
        0% {
            background-position: 0  0;
        }
        100% {
            background-position: -100%  0;
        }
    }

  .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 30%;
    margin: auto;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>